<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2022-11-25 14:51:27
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2022-12-02 10:00:21
-->
<template>
  <el-container>
    <el-aside width="220px" class="sidebar">
      <el-menu
        router
        unique-opened
        class="el-menu-vertical-demo"
        background-color="#826fb7"
        text-color="#fff"
        active-text-color="#42e1a6"
        :default-active="activePath"
      >
        <sidebar-item v-for="(item, index) in menuList" :menus="item" :key="index"></sidebar-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        <!-- 这里对NewsDetail做不缓存处理，常见场景：进入新闻列表页，点击每条数据进入新闻详情页，从新闻详情页返回后列表页应该不刷新，再次点击其他条数据，进入新闻详情页需要刷新。 -->
        <keep-alive exclude="NewsDetail"> <router-view /> </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { menuList } from '@/data/menu'
import sidebarItem from '../layout/sidebarItem.vue'
export default {
  components: { sidebarItem },
  name: 'Home',
  data() {
    return {
      menuList,
      activePath: ''
    }
  },
  created() {
    this.activePath = this.$route.path
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
}
.sidebar {
  height: 100%;
  background-color: #826fb7;
}
</style>